import { defineConfig } from '@umijs/max';
import px2vw from 'postcss-px-to-viewport-8-plugin';
import routesConfig from './config.routes';

const { REACT_APP_ENV = 'dev' } = process.env;

export default defineConfig({
  plugins: [],
  antd: {
    theme: {
      token: {
        // colorPrimary: '#000000',
        colorInfo: '#000000',
        fontSize: 12,
        borderRarius0: 6,
        colorSuccess: '#52c41a',
        colorLink: '@1677ff',
      },
    },
  },
  moment2dayjs: {
    preset: 'antd',
    plugins: ['duration'],
  },
  // 使用axios封装好的request需要用到代理
  /**
   * 将前端应用发出的请求转发到另一个服务器，当我们想要请求后端API，但后端服务器运行在另一个端口或域名上
   */
  proxy: {
    /**
     * 所有的后端路由/api开头的，前缀域名都会被替换到服务器请求数据
     *
     * target： 所有的以/api开头的请求都会转发到http://localhost:3000,如果想访问/api/data
     * 请求实际上会被发送到http://localhost:3000/api/data
     * changeOrigin：该选项会改变请求的origin头部，使其看起来像从target指定的服务器发出的
     * 而不是从你的服务器发出的，这对于后端服务来说可能是必要的，因为他们可能配置了同源策略
     * pathRewrite：允许重写请求路径，被设置为空对象，意味着路径不会被重写。如果想要所有的
     * /api的请求都去掉/api前缀，可以设置为{'^/api':''}
     * secure：布尔值，取决于target是否以https开头。如果设置true，则告诉代理服务器在与目标服务器
     * 建立连接时，应验证SSL证书的有效性。对于代理到HTTPS服务器特别有用
     * logLevel：字符串（info默认，debug，warn，error）。控制代理日志的详细程度，设置为debug可以获取更多关于代理行为的日志信息有助于调试
     * bypass：函数，无默认值。允许根据请求的条件（如URL，头信息等）决定是否绕过代理，如果函数返回true
     * 则请求将直接发送到原始目标，而不是通过代理
     * headers：对象，无默认值。允许为代理请求添加额外的HTTP头，对于需要额外认证或自定义的后端服务特别有用
     * ws：布尔值或对象，默认值false。如果设置为true，则启用WebSocket。如果是一个对象，则可以提供
     * 更详细的WebSocket代理配置
     * onProxyReq：函数，无默认值。在代理请求被发送到目标服务器之前，允许修改请求。对添加自定义头，修改
     * URL等特别有用
     * onProxyRes：函数，无默认值。在代理响应从目标服务器返回之前，允许修改响应。对于修改响应头，响应体很有用
     * xfwd：布尔值，默认值false。如果设置为true，则添加X-Forwarded-For头到代理请求中，以便后端服务可以知道原始请求的IP地址
     */
    '/api': {
      // 代理的目标地址，即后端服务器地址
      target: 'http://localhost:3000',
      // 在代理请求时，将Origin字段设置为目标地址，以实现跨域
      changeOrigin: true,
      // 以 /api 开头的路径将被重写为 ：后面的value，若服务器地址必须有/api,则不转换
      pathRewrite: {},
    },
    '/user': {},
  },
  model: {},
  request: {},
  access: {},
  locale: {
    default: 'zh_CN',
    baseSeparator: '_',
    // useLocalStorage: true,
    baseNavigator: true,
  },
  styledComponents: {
    babelPlugin: {
      topLevelImportPaths: ['umi', '@umijs/max'],
    },
  },
  valtio: {},
  clickToComponent: {},
  layout: {
    title: '鲜花采购系统',
  },

  /**
   * 一个全局的初始数据流，可以用它在插件之间共享数据
   * @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
   */
  initialState: {},
  ...routesConfig,
  extraPostCSSPlugins: [
    px2vw({
      unitToConvert: 'px', //需要转换的单位，默认为"px"；
      viewportWidth: 1920, // 根据设计搞来
      viewportHeight: 1000,
      unitPrecision: 6,
      viewportUnit: 'vw',
      propList: ['*'], //要进行转换的属性列表,*表示匹配所有,!表示不转换
      selectorBlackList: ['.ignore', '.hairlines'], //不进行转换的css选择器，继续使用原有单位
      minPixelValue: 1,
      mediaQuery: true, //设置媒体查询里的单位是否需要转换单位
      replace: true, //是否直接更换属性值，而不添加备用属性
      // exclude: /(\/|\\)(node_modules)(\/|\\)/, //忽略某些文件夹下的文件
    }),
  ],
  npmClient: 'pnpm',
  verifyCommit: {
    scope: ['feat', 'fix', 'other', 'merge'],
    allowEmoji: true,
  },
  esbuildMinifyIIFE: true,
  hash: true,
});
